<template>
	<view class="page">
		<hx-navbar :back="false" :backgroundColor="[255, 255, 255]" :fixed="true">
			<view slot="left" class="flex justify-between container-top" style="width:100%;margin: 0 20rpx 0 45rpx;">
				<view class="flex align-center" style="margin-right: 20rpx;">
					<view class="" style="font-size: 36rpx;margin-right: 10rpx;">
						广东
					</view>
					<view class="">
						<i class="fa fa-map-marker" style="font-size: 36rpx;" aria-hidden="true"></i>
					</view>
				</view>
				<view class="mian-top" @tap="hideModal">
					<view>
						<navigator url="../search/search" hover-class="none" style="display: flex;justify-content: center;background-color: #FFFFFF;">
							<view class="weui-cell__bd">
								<view class="cuIcon-search">
								</view>
								<input class="weui-input" name="input" placeholder-class="placeholder-input" placeholder="输入关键词搜索相关产品" />
							</view>
						</navigator>
					</view>
				</view>
				<view class="flex align-center">
					<i class="fa fa-commenting-o" style="font-size: 50rpx;" aria-hidden="true"></i>
				</view>
			</view>
		</hx-navbar>
		<view class="">
			<swiper class="swiper" indicator-dots="true" autoplay="true" :interval="2000" :duration="500" indicator-color="rgba(255, 255, 255,1)"
			 indicator-active-color="#26C594" circular="true">
				<block v-for="(item,i) in banner" :key="i">
					<swiper-item>
						<image src="../../static/imgs/ebaselb.png" mode="aspectFit" style="width: 100%;height: 100%;border-radius: 20rpx;"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="discounts">
			<view class="notice">
				公告：新鲜的猕猴桃到货啦！新品上市满100减20元。
			</view>
			<view class="flex ">
				<view class="get hese">
					<image src="../../static/imgs/youhueiqvan1.png" mode="scaleToFill"></image>
					<text class="get-zhongdian" style="font-size: 18rpx;">￥<text class="figure">6</text><text style="position: relative;top: -2rpx;left: 4rpx;">无门槛</text></text>
					<text class="getal">领取</text>
				</view>
				<view class="get yingse">
					<image src="../../static/imgs/youhueiqvan2.png" mode="scaleToFill"></image>
					<text class="get-zhongdian" style="font-size: 18rpx;">￥<text class="figure">20</text><text style="position: relative;top: -2rpx;left: 4rpx;">指定</text></text>
					<text class="getal">领取</text>
				</view>
			</view>
			<view class="flex justify-between align-center">
				<view class="bianqian flex">
					<text class="cu-tag line-red sm radius">满30减10</text>
					<text class="cu-tag line-red sm radius">满40减20</text>
					<text class="cu-tag line-red sm radius">满50减30</text>
					<text class="cu-tag line-yellow sm radius">6元无门槛红包</text>
				</view>
				<view class="youyh">
					2个优惠<i class="fa fa-angle-down" aria-hidden="true"></i>
				</view>
			</view>
		</view>
		<view class="">
			<view class="title-top flex">
				<view :class="switchs==0?'text-bold':''" @click="switchhs(0)">
					选购
					<view class="xiang" v-show="switchs==0"></view>
				</view>
				<view class="estimate" :class="switchs==1?'text-bold':''" @click="switchhs(1)">
					评价<text style="position: absolute;top: 8rpx;">8365</text>
					<view class="xiang" v-show="switchs==1"></view>
				</view>
				<view :class="switchs==2?'text-bold':''" @click="switchhs(2)">
					商家
					<view class="xiang" v-show="switchs==2"></view>
				</view>
			</view>
			<!-- 选购 -->
			<view class="mian-content">
				<view class="mian-content-left">
					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
					 @scroll="scroll">
						<view class="scroll-view-item" :class="chooses==i?'change':''" v-for="(item,i) in choose" :key="i" @click="choosefanfa(i)">{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="mian-content-right">
					<view class="nowList">
						<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
						 @scroll="scroll">
							<view class="flex align-center justify-end " style="margin-bottom: 30rpx;">
								<view class="sort">
									智能排序 <i class="fa fa-sort-desc" aria-hidden="true"></i>
								</view>
								<view class="sort">
									销量 <i class="fa fa-sort-desc" aria-hidden="true"></i>
								</view>
								<view class="sort" style="margin-right: 45rpx;">
									筛选 <i class="fa fa-caret-up" aria-hidden="true"></i>
								</view>
							</view>
							<view class="">
								<view class="product flex">
									<view class="ebaseimg">
										<image src="../../static/imgs/ebaseimg.png" mode="aspectFill"></image>
									</view>
									<view class="product-text" style="flex: 1;">
										<view class="name">
											正宗北京平谷大桃12个
										</view>
										<view class="introduce text-bold">
											脆甜桃子现摘现发
										</view>
										<view class="sell">
											<text>月售 456</text><text>好评率90%</text>
										</view>
										<view class="store">
											<text>果果园苗木店铺</text><text class="text-bold"> 河南 <i class="fa fa-angle-right" aria-hidden="true"></i></text>
										</view>
										<view class="price">
											<text class="text-orange text-bold">￥<text style="font-size: 32rpx;">112.6</text></text>
											<text class="yanjia">￥114</text>
										</view>
									</view>
									<view class="add">
										+
										<view class="add-number">
											1
										</view>
									</view>
								</view>
								<view class="product flex">
									<view class="ebaseimg">
										<image src="../../static/imgs/ebaseimg.png" mode="aspectFill"></image>
									</view>
									<view class="product-text" style="flex: 1;">
										<view class="name">
											正宗北京平谷大桃12个
										</view>
										<view class="introduce text-bold">
											脆甜桃子现摘现发
										</view>
										<view class="sell">
											<text>月售 456</text><text>好评率90%</text>
										</view>
										<view class="store">
											<text>果果园苗木店铺</text><text class="text-bold"> 河南 <i class="fa fa-angle-right" aria-hidden="true"></i></text>
										</view>
										<view class="price">
											<text class="text-orange text-bold">￥<text style="font-size: 32rpx;">112.6</text></text>
											<text class="yanjia">￥114</text>
										</view>
									</view>
									<view class="add">
										+
										<view class="add-number">
											1
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="flex justify-center">
				<view class="">
					满25减10，满45减20，满60减25，满80减35
				</view>
			</view>
			<view class="button flex">
				<view class="bg-black">
					<view class="top">
						<text style="font-size: 36rpx;margin-right: 15rpx;">￥112.6</text>
						<text style="color: #999999;text-decoration: line-through">￥114</text>
					</view>
					<view class="yengfei">
						另需运费￥12
					</view>
				</view>
				<view class="bg-green">
					去结算
				</view>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="cu-bar tabbar bg-white">
			<view class="action text-green">
				<view class="cuIcon-homefill"></view> 首页
			</view>
			<view class="action text-gray">
				<view class="cuIcon-similar"></view> 分类
			</view>
			<view class="action text-gray add-action">
				<button class="cu-btn cuIcon-add bg-green shadow"></button>
				发布
			</view>
			<view class="action text-gray">
				<view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				购物车
			</view>
			<view class="action text-gray">
				<view class="cuIcon-my">
					<view class="cu-tag badge"></view>
				</view>
				我的
			</view>
		</view>
	</view>
</template>

<script>
	import 'static/css/font-awesome.min.css';
	export default {
		data() {
			return {
				banner: ['color1', 'color2', 'color3'],
				switchs: 0,
				choose: [{
						id: 1,
						name: '新品上市'
					},
					{
						id: 2,
						name: '桃子'
					},
					{
						id: 3,
						name: '苹果'
					},
				],
				chooses: 0,
			}
		},
		methods: {
			switchhs(i) {
				this.switchs = i;
			},
			choosefanfa(i) {
				this.chooses = i;
			},
		}
	}
</script>

<style>
	.mian-top {
		flex: 1;
		height: 80rpx;
		z-index: 10;
		background-color: #FFFFFF;
	}

	.mian-top>view {
		padding-top: 20rpx;
	}

	.weui-cell__bd {
		width: 94%;
		border-radius: 50rpx/50rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		border: #FFFFFF 1rpx solid;
		background-color: #F5F5F5;
	}

	.placeholder-input {
		font-size: 24rpx;
	}

	.weui-input {
		font-size: 24rpx;
	}

	.weui-cell__bd .cuIcon-search {
		margin: 0 30rpx;
	}

	.swiper {
		margin: 30rpx 35rpx;
		height: 200rpx;
	}

	.discounts {
		margin: 0rpx 40rpx;
	}

	.discounts .notice {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}

	.discounts>.flex {
		margin-bottom: 20rpx;
	}

	.discounts .get {
		width: 218rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		position: relative;
		display: flex;

	}

	.discounts .get+.get {
		margin-left: 10rpx;
	}

	.discounts .get text {
		line-height: 40rpx;
	}

	.discounts .get>text {
		display: block;
		transform: scale(.8);
	}

	.discounts .get image {
		position: absolute;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
	}

	.get-zhongdian {
		width: 60%;
		text-align: center;
		margin: 0 18rpx 0 36rpx;
		display: flex;
		align-items: center;
	}

	.getal {
		position: absolute;
		right: 5rpx;
	}

	.figure {
		font-size: 30rpx;
		font-weight: bold;
	}

	.hese {
		color: #60473B;
	}

	.yingse {
		color: #858790;
	}

	.bianqian .cu-tag.sm {
		position: relative;
		left: -8rpx;
		height: 40rpx;
		transform: scale(0.83);
	}

	.bianqian .cu-tag+.cu-tag {
		margin-left: -8rpx;
	}

	.line-yellow {
		color: #DAB96B;
	}

	.youyh {
		color: #999999;
		font-size: 22rpx;
	}

	.youyh i {
		margin: 0 10rpx;
		font-weight: bold;
	}

	/* 选择 */
	.title-top {
		padding: 15rpx 25rpx;
		margin-bottom: 15rpx;
	}

	.title-top>view {
		position: relative;
		font-size: 32rpx;
		padding-bottom: 10rpx;
		margin-right: 80rpx;
	}

	.title-top .xiang {
		width: 38rpx;
		height: 2rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #26C594;
		margin: auto;
	}

	.title-top>view text {
		font-size: 20rpx;
		color: #999999;
	}

	.title-top .estimate {
		margin-right: 130rpx;
	}

	/* 选购 */
	.mian-content {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.scroll-Y {
		height: 100%;
	}

	.scroll-Y ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.mian-content-left .scroll-view-item {
		width: 160rpx;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 45rpx;
		font-size: 30rpx;
		color: #666;
	}

	.mian-content-left .change {
		font-weight: bold;
		color: #333;
	}

	.mian-content-right {
		flex: 1;
	}

	.mian-content-right .sort {
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 75rpx;
	}

	.mian-content-right .sort i {
		position: relative;
		left: 8rpx;
	}
	.mian-content-right .sort .fa-sort-desc{
		top: -6rpx;
	}
	.mian-content-right .sort .fa-caret-up{
		top: 0rpx;
	}

	.product {
		position: relative;
	}

	.product+.product {
		margin-top: 60rpx;
	}

	.product .ebaseimg image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 10rpx;
		margin: 10rpx;
	}

	.product .product-text>view {
		margin-bottom: 16rpx;
	}

	.product .name {
		font-size: 30rpx;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product .introduce {
		color: #666666;
		font-size: 20rpx;
		transform: scale(.95);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product .sell {
		font-size: 22rpx;
		color: #999;
	}

	.product .store {
		font-size: 22rpx;
		color: #999;
	}

	.product .price {
		margin-top: 50rpx;
		font-size: 24rpx;
		color: #999;
	}

	.product .price .text-orange {
		color: #FE522E;
	}

	.product .price .yanjia {
		font-size: 20rpx;
		transform: scale(.95);
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.product .add {
		width: 44rpx;
		height: 44rpx;
		line-height: 42rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #26C594;
		color: #fff;
		font-size: 36rpx;
		position: absolute;
		bottom: 0rpx;
		right: 30rpx;
	}

	.product .add .add-number {
		width: 30rpx;
		height: 30rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #F3635A;
		color: #fff;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		font-size: 20rpx;
		transform: scale(.95);
	}
	
	/* 底部支付 */
		.bottom {
			width: 694rpx;
			position: fixed;
			bottom: 100rpx;
			left: 0;
			right: 0;
			margin: auto;
			background-color: #FFF7DC;
			border-radius: 30rpx 30rpx 50rpx 50rpx;
		}
	
		.bottom .justify-center {
			font-size: 20rpx;
			color: #E67122;
			padding: 15rpx 50rpx;
			transform: scale(.9);
		}
	
		.bottom .button {
			width: 100%;
			height: 90rpx;
			color: #FFFFFF;
		}
	
		.bottom .button i {
			font-size: 50rpx;
			margin-right: 10rpx;
		}
	
		.bg-black {
			width: 78%;
			background-color: #272C2B;
			color: #FFFFFF;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			padding-left: 50rpx;
			font-size: 24rpx;
		}
	
		.bg-black>.top {
			position: relative;
			top: 5rpx;
		}
	
		.yengfei {
			color: #999999;
			transform: scale(0.9);
			position: relative;
			left: -17rpx;
		}
	
		.bg-green {
			width: 22%;
			background-color: #26C594;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
</style>
